<template>
  <div class="comprehensive-table">
    <PropTable
      :data="tableData"
      :column="tableColumn"
      :loading="loading"
      @selection-change="selectChange"
      @reset="reset"
      @onSubmit="onSubmit"
    >
      <template v-slot:btn>
        <div class="table-setting-btn">
          <el-button type="primary" class="common-button" @click="handleAdd">
            <i class="iconfont com-icon icon-add"></i>
            <span>添加</span>
          </el-button>
          <el-button type="danger" class="common-button" @click="handleDelete">
            <i class="iconfont com-icon icon-delete"></i>
            <span>删除</span>
          </el-button>
        </div>
      </template>
      <template v-slot:gender="scope">
        {{ scope.row.gender == 0 ? '女' : '男'}}
      </template>
      <template v-slot:operation="scope">
        <el-button class="common-small-button" type="primary" size="small" @click="onEdit(scope.row)">
          <i class="iconfont small-icon icon-edit"></i>
          <span>编辑</span>
        </el-button>
        <el-button class="common-small-button" type="danger" size="small" @click="onDelete(scope.row)">
          <i class="iconfont small-icon icon-delete"></i>
          <span>删除</span>
        </el-button>
      </template>
    </PropTable>
    <DialogComponent
      :title="title"
      :width="width"
      :visible.sync="visible"
      :formData.sync="formData"
      :formModel.sync="formModel"
      :rowId="rowId"
      @handleAddTable="handleAddTable"
    />
  </div>
</template>

<script>
import PropTable from '@/components/table/PropTable/index.vue'
import DialogComponent from '@/components/DialogComponent/index.vue'
import { publicController} from '@/utils/publicPackage.js'

export default {
  name: 'index',
  mixins:[ publicController ],
  components:{
    PropTable,
    DialogComponent,
  },
  data(){
    return {
      tableData: [],
      visible: false,
      title: '',
      formData: [],
      formModel: {},
      width: '50%',
      rowId: 0,
      deleteData: [],
      loading: false,
    }
  },
  computed:{
    tableColumn(){
      const column = [
        { type: 'selection', width: 60, fixed: 'left', formItem: false},
        { name: 'name', label: '姓名', inSearch: true, valueType: 'input', width: 80, formItem: true, checked: true},
        { name: 'gender', label: '性别', slot: true, inSearch: true, valueType: 'select',
          option:[{ value: 1, label: '男'}, { value: 0, label: '女'}], formItem: true, checked: true},
        { name: 'age', label: '年龄', valueType: 'input', formItem: true, checked: true},
        { name: 'account', label: '账号', inSearch: true, valueType: 'input', formItem: true, checked: true},
        { name: 'city', label: '城市', width: 100, valueType: 'input', formItem: true, checked: true},
        { name: 'region', label: '城区', valueType: 'input', formItem: true, checked: true},
        { name: 'address', label: '地址', inSearch: true, valueType: 'input', width: 240, formItem: true, checked: true},
        { name: 'date', label: '日期', sorter: true, valueType: 'input', width: 180, formItem: true, checked: true},
        { name: 'postalCode', label: '邮编',inSearch: true, valueType: 'input', formItem: true, checked: true},
        { name: 'operation', label: '操作', slot: true, fixed: 'right', width: 200}
      ]
      return column
    }
  },
  mounted () {
    this.getTableData()
  },
  methods:{
    // 获取新增表单字段
    getFormData(){
      const form = []
      this.tableColumn.map(item => {
        item.formItem && form.push(item)
      })
      this.formData = form
      return form
    },
    // 获取表单字段模型
    getFormModel(){
      const model = {}
      this.tableColumn.map(item => {
        if(item.formItem){
          model[item.name] = null
        }
      })
      this.formModel = model
      return model
    },
    // 选择项发生改变
    selectChange(val){
      this.deleteData = val
    },
    // 重置表单
    reset(){
      setTimeout(() =>{
        this.loading = false
      },1000)
      console.log('重置查询表单成功')
    },
    // 查询列表数据
    onSubmit(){
      // 查询在后台实现
      this.$message.success('触发查询方法')
    },
    // 添加数据按钮
    handleAdd(){
      this.title = '新增人员信息'
      this.rowId = Date.now()
      this.getFormData()
      this.getFormModel()
      this.visible = true
    },
    // 删除数据
    handleDelete(){
      if(this.deleteData.length  <= 0){
        this.$message.warning('未选中任何行')
      }else{
        this.$confirm("你确定要删除选中项吗?", "温馨提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            // 如果全选，则直接清空表格
            if(this.deleteData.length == this.tableData.length){
              this.tableData = []
            }else{
              this.deleteData.map(item => {
                this.tableData = this.tableData.filter(it => it.id != item.id)
              })
            }
            this.$message.success('删除成功')
          })
          .catch(() => {});
      }
    },
    // 添加数据
    handleAddTable(val){
      // 新增数据
      if(val.title.indexOf('新增') > -1){
        val.formData.id = val.rowId
        this.tableData = [val.formData, ...this.tableData]
        this.$message.success('新增成功')
      }else{
        for(let i = 0; i < this.tableData.length; i++){
          if(this.tableData[i].id == val.rowId){
            val.formData.id = val.rowId
            this.$set(this.tableData, i, val.formData)
            break
          }
        }
        this.$message.success('编辑成功')
      }
    },
    // 编辑表格数据
    onEdit(row){
      this.rowId = row.id
      this.title = '编辑人员信息'
      const model = {}
      this.tableColumn.map(item => {
        if(item.formItem){
          model[item.name] = row[item.name]
        }
      })
      this.formModel = model
      this.getFormData()
      this.visible = true
    },
    // 删除行数据
    onDelete(row){
      this.$confirm("你确定要删除当前项吗?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableData = this.tableData.filter(item => item.id != row.id)
          this.$message.success('删除成功')
        })
        .catch(() => {});
    },
  }
}
</script>

<style lang="scss" scoped>
.table-setting-btn{
  display: flex;
  justify-content: flex-end;
}
</style>
